<template>
<!-- 复选框 -->
<input
    type="checkbox"
    v-model="toggle"
    true-value="yes"
    false-value="no" />
    <label>{{toggle}}</label>

    <p>------------</p>

<input
    type="checkbox"
    v-model="toggle2"
    :true-value="dynamicTrueValue"
    :false-value="dynamicFalseValue" />
    <label>{{toggle2}}</label>

    <p>------------</p>

<!-- 单选按钮 -->
<input type="radio" v-model="pick" :value="first" />{{pick}}
<input type="radio" v-model="pick" :value="second" />{{pick}}

<p>------------</p>
<!-- 选择器选项 -->
<select v-model="selected">
    <!-- 内联对象字面量 -->
    <option :value="{ number: 123 }">123</option>
</select>
{{selected}}

</template>


<script setup>
import {ref, reactive} from 'vue'
const toggle = ref('')
const toggle2 = ref('')
const dynamicTrueValue = ref('爸爸')
const dynamicFalseValue = ref('妈妈')
const pick = ref('')
const first = ref('first2')
const second = ref('second2')
const selected = ref('')

</script>


